<template>
  <div style="width: 100%">
    <div ref="exSearch" style="text-align: right;" class="advancedSearch">
		<slot name="default"></slot>
		&nbsp;&nbsp;
		<template v-if="defaultCode" >
			<el-input v-model="searchForm[defaultCode]" class="exSearch_search_tip"
					  :placeholder="placeholder?placeholder:this.$t('common.search_tip')"
					  :maxlength="maxlength"
					  :show-word-limit="showLimit"
					  :style="'width:'+width+'px;'"
					  clearable>
				<template v-slot:append>
					<el-button-group type="info" style="width:30px;margin-left: -8px;">
						<el-button icon="el-icon-search" style="width: 35px;border: 0" @click="searchHandler" :loading="loading"/>
						<el-button icon="el-icon-d-arrow-right" style="width: 35px;border: 0" @click="expandHandler"/>
					</el-button-group>
				</template>
			</el-input>
		</template>
    <template v-else>
			<el-button link style="color: rgba(0,111,222,0.9)" @click="expandHandler">搜索</el-button>
		</template>
    </div>

    <el-drawer v-model="drawer" :show-close="showClose">
      <template #header>
        <div style="width: 100%">
          <div style="float: left;width: 100%">
            <div style="font-size: 14px;font-weight: 400;">{{ $t('common.search_title') }}</div>
          </div>
          <div style="float: left;width: 100%;margin-top: -10px;margin-bottom: -30px;">
            <el-divider border-style="dashed"/>
          </div>
        </div>
      </template>
      <template #default>
        <search-form :searches="searches" :search-form="searchForm"></search-form>
      </template>
      <template #footer>
        <div style="flex: auto;text-align: center">
          <el-button plain type="primary" icon="el-icon-search" @click="searchHandler" :loading="loading">
            {{ $t('button.search_ok') }}
          </el-button>
          <el-button plain type="warning" icon="el-icon-brush" @click="resetHandler">{{ $t('button.search_clear') }}
          </el-button>
          <el-button plain type="info" icon="el-icon-close" @click="closeHandler">{{ $t('button.search_close') }}
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>

import SearchForm from "@/components/exSearch/search_form.vue";
import tool from "@/utils/tool";

export default {
  name: "exSearch",
  props: {
    defaultCode: {type: String, default: null},
    placeholder: {type: String, default: null},
    width: {type: Number, default: 250},
    maxlength: {type: Number, default: 50},
    showLimit: {type: Boolean, default: false},
    showClose: {type: Boolean, default: false},
    searches: {type: Array, default: null},
	  fixedParam: {type: Object, default: {}},//固定搜索参数
    initParams: {type: Object, default: {}},//初始搜索参数
  },
  components: {SearchForm},
  data() {
    return {
      drawer: false,
      searchForm: {},
      selectDate: null,
      loading: false,
      range: null,
      code: null,
      codes: [],
    }
  },
  watch: {},
  computed: {},
  created() {
  },
  mounted() {
	  Object.assign(this.searchForm,this.initParams);
  },
  methods: {
    async searchHandler() {
      await this.$emit("searchOk", {});
    },
    expandHandler() {
      this.drawer = true;
    },
    resetHandler() {
      this.searchForm = {};
    },
    closeHandler() {
      this.drawer = false;
    },
    searchParams() {
		for (let key in this.searchForm) {
			if (key.includes(".")) {
				let strs = key.split(".");
				if (!this.searchForm[strs[0]]) {
					this.searchForm[strs[0]] = {};
				}
				this.searchForm[strs[0]][strs[1]] = this.searchForm[key];
			}
		}

		if (!this.fixedParam) {
			this.fixedParam = {};
		}
		let fixedParams = tool.objCopy(this.fixedParam);
		let queryParams = this.searchForm;
		for (let key in fixedParams) {
			if(fixedParams[key]){
				if(Array.isArray(fixedParams[key])){
					if(fixedParams[key].length>0){
						if(Array.isArray(queryParams[key])&&queryParams[key].length >0){
							fixedParams[key] = fixedParams[key].filter(item=>queryParams[key].includes(item));
						}
						if(fixedParams[key].length===0){
							fixedParams[key].push("none");
						}
					}else{
						delete fixedParams[key];
					}
				}
			}else{
				delete fixedParams[key];
			}
		}
      return Object.assign(queryParams,fixedParams);
    },
    setLoading(val) {
      this.loading = val;
    },
    focusHandler(code, range) {
      this.code = code;
      this.codes = this.code.split(",");
      this.codes.forEach(item => {
        this.searchForm[item] = undefined;
      });
      this.range = range;
    },
    visibleChange(visibility) {
      if (!visibility) {
        this.selectDate = undefined;
        let dates = this.searchForm[this.code];
        if (dates) {
          this.codes.forEach((item, index) => {
            this.searchForm[item] = dates[index];
          });
        }
      }
    },
    calendarChange(dates) {
      this.selectDate = dates[0].getTime();
    },
    disabledDate(time) {
      if (this.range && this.selectDate) {
        const rangeDate = this.range * 8.64e7;//8.64e7就是一天的时间戳 24*60*60*1000
        const minTime = this.selectDate - rangeDate
        const maxTime = this.selectDate + rangeDate
        return time.getTime() < minTime || time.getTime() > maxTime
      }
      return false;
    }
  }
}
</script>
